<template>
    <dzs-dialog :title="title" :isShow="isShow" @close="onCancel" @open="onOpen">
        <dzs-form :loadingOption="formInfo" :status="status" ref="myForm" v-model:value="formData" :options="formOptions" @onCancel="onCancel"
            @onSubmit="onSubmit">

        </dzs-form>
    </dzs-dialog>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import type { dzsFormProps } from "@/components/dzs-form/@types";
import type { dzsFormInstance } from "@/components/dzs-form";
import type { formData } from "../@types";
import { addPermission , updatePermission} from "../api/api";
import { ElNotification } from 'element-plus';
import type { tableItem } from "../@types";
const emit = defineEmits(['cancel', 'update:isShow', 'onHoldSearch'])
const props = defineProps<{
    dialogData?: tableItem,
    status: string,
    isShow: boolean
}>()

const myForm = ref<dzsFormInstance>();
const formData = ref<formData>({
    ID: "",
    name: "",
    code: "",
    remark: ""
})

const formInfo = ref({
    loading : false,
})

const title = computed(() => {
    return props.status === "add" ? "添加菜单" : props.status === "edit" ? "编辑菜单" : "查看详情"
})
const formOptions = computed<dzsFormProps['formOptions']>(() => {
    return {
        formProps: {
            labelWidth: "120px"
        },
        formItem: [
            {
                label: "名称",
                type: "input",
                key: "name",
                rules: [
                    {
                        required: true,
                        message: "名称不能为空",
                        trigger: "blur"
                    }
                ]
            },
            {
                label: "角色编码",
                type: "input",
                key: "code",
                rules: [
                    {
                        required: true,
                        message: "角色编码不能为空",
                        trigger: "blur"
                    }
                ]
            },
            {
                label: "备注",
                type: "input",
                props: {
                    type: "textarea",
                    autosize: { minRows: 4, maxRows: 6 }
                },
                key: "remark"
            }
        ]
    }
})

onMounted(() => {

})

const onCancel = () => {
    myForm.value?.onCancel<formData>(false, {
        success: (res) => {
            formData.value = res
        }
    })
    emit('cancel');
    emit('update:isShow', false);
}

const onOpen = () => {
    if (props.dialogData?.ID) {
        formData.value = props.dialogData
    }
}
const onSubmit = () => {
    formInfo.value.loading = true
    if (props.status === "edit") {
        updatePermission({
            ...formData.value
        }).then(res => {
            ElNotification({
                title: '成功',
                message: "提交成功",
                type: 'success',
                duration : 1000
            })
            emit("onHoldSearch");
            onCancel();
        }).finally(()=>{
            formInfo.value.loading = false;
        })
        return;
    }
    addPermission({
        ...formData.value
    }).then(res => {
        ElNotification({
            title: '成功',
            message: "提交成功",
            type: 'success',
            duration : 1000
        })
        emit("onHoldSearch");
        onCancel();
    }).finally(()=>{
        formInfo.value.loading = false;
    })
}
</script>
<style scoped></style>